<template>
	<div class="main" v-loading="loading"
    element-loading-text="拼命加载中">
    <!-- 登录弹出框 -->
    <el-dialog
      :visible.sync="dialogVisible" center width="600px"
      :before-close="handleClose">

      <div  class="yanzheng">
      	<div class="title">身份验证</div>
      	<div class="yanzheng-body">
      		<div class="nameAndPhone">
      			<!-- <image class="nameImg" src="../../static/img/paper_name.png"></image> -->
      			<!-- <span>姓名</span> -->
      			<el-input @focus="focus" @blur="blur"  v-model="yanzheng.name" placeholder="姓名"/>
      		</div>
      		<div class="nameAndPhone" >
      			<el-input @focus="focus" @blur="blur" maxlength="11" v-model="phone" placeholder="手机号码"/>
      		</div>
      		<div class="nameAndPhone">
      			<el-input @focus="focus" class="message" @blur="blur" maxlength="6" v-model="mobileCode" placeholder="短信验证码"/>
      			<div class="code" @click="getPhonecode">{{codeBtn.codeText}}</div>
      		</div>

      		<el-button class="button" type="primary" @click="memberLogin">
      			确定
      		</el-button>
      	</div>
      </div>

<!--      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span> -->
    </el-dialog>

<!-- 		<wyb-popup ref="popup" :maskAlpha="0.2" mode="size-fixed" :maskClickClose="false" type="bottom" height="400" width="500" radius="6" :showCloseIcon="false">
			<div  class="yanzheng">
				<div class="title">身份验证</div>
				<div class="yanzheng-body">
					<div class="nameAndPhone">
						<input @focus="focus" @blur="blur"  v-model="yanzheng.name" placeholder="姓名"/>
					</div>
					<div class="nameAndPhone" >
						<input @focus="focus" @blur="blur" maxlength="11" v-model="phone" placeholder="手机号码"/>
					</div>
					<div class="nameAndPhone">
						<input @focus="focus" class="message" @blur="blur" maxlength="6" v-model="mobileCode" placeholder="短信验证码"/>
						<div class="code" @tap="getPhonecode">{{codeBtn.codeText}}</div>
					</div>

					<button @click="memberLogin"  size="mini">
						确定
					</button>
				</div>
			</div>
		</wyb-popup> -->
	</div>
</template>

<script>
  import {
    Notification
  } from 'element-ui';
	import Cookies from 'js-cookie'
	import qs from 'qs'
	export default {
		components: {
		},
		data() {
			return {
        dialogVisible: false,
        loading:false,
				id:'',
				//验证码按钮
				codeBtn: {
					codeTime: 60,
					codeText: "获取验证码",
					codeStatus: true
				},
				phone:'',
				mobileCode:'',
				//验证规则
				rules: {
					phone: {
						rule: /^1[3456789]\d{9}$/,
						msg: "手机号格式错误"
					},
					mobileCode: {
						rule: /^[0-9]{6}$/,
						msg: "请输入6位数字验证码"
					}
				},
				yanzheng: {
					name: null,
					mobile: null,
					mobileCode:null,
				},
			};
		},
		created() {
			console.log(this.$route.query.id,888);
			this.id = this.$route.query.id;
			// uni.showLoading({
			// 	title: '正在跳转中...',
			// 	mask: true
			// })
		},
		mounted() {
			// this.$refs.popup.show();
			this.getCourseQrCode(this.id)
		},
		methods:{
       handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
			memberLogin() {
				if (!this.yanzheng.name) {
          Notification.warning({
            title: '提示',
            message: "姓名不能为空!"
          });
					return;
				} else if (this.yanzheng.name.length > 8) {
          Notification.warning({
            title: '提示',
            message: "姓名长度不能超过八位"
          });
					return;
				}
				if(this.validate('phone') && this.validate('mobileCode')){
					this.yanzheng.mobile = this.phone;
					this.yanzheng.mobileCode = this.mobileCode;

					// 通过手机号码和验证码获取临时登录token
					this.$axios.$get('/f/loginByMobile?' + qs.stringify(this.yanzheng))
						.then(res => {
              let obj = res.data.educationUser;
              Cookies.set("userData", JSON.stringify(obj));
							Cookies.set("token",res.data.token,{ expires: 1 });
              // that.$emit("loginAfter");
							this.dialogVisible = false
							//重新调用校验接口
							this.getCourseQrCode(this.id)
							this.loading = false
						})
						.catch(error => {})
				}

			},
			//判断验证是否符合要求，合法性校验
			validate(key){
				let bool=true;
				if(!this.rules[key].rule.test(this[key])){
					//提示信息
					// uni.showToast({
					// 	title:this.rules[key].msg,
					// 	icon:'none',
					// })
          Notification.warning({
            title: '提示',
            message: this.rules[key].msg
          });
					//取反
					bool=false;
					return false;
				}
				return bool;
			},
			//获取验证码按钮点击计时事件
			getPhonecode() {
				if(this.validate('phone') && this.codeBtn.codeStatus) {
					this.codeBtn.codeStatus = false
					let timerId = setInterval(() => {
						let codetime = this.codeBtn.codeTime
						codetime--
						this.codeBtn.codeTime = codetime
						this.codeBtn.codeText = codetime + "s"
						if(codetime < 1) {
							clearInterval(timerId)
							this.codeBtn.codeText = "重新获取"
							this.codeBtn.codeTime = 60
							this.codeBtn.codeStatus = true
						}
					},1000)
					this.$axios.$get('/f/getMobileValidate?mobile=' + this.phone).then(function(response) {
            Notification.success({
              title: '提示',
              message: "短信已发送"
            });
					}).catch(function(error) {
					  console.log(error);
					})
				}
			},
			focus() {
				this.scrollTop = document.scrollingElement.scrollTop;
			},
			blur() {
				document.scrollingElement.scrollTo(0, this.scrollTop);
			},
			getCourseQrCode(id){
				let that = this
				this.$axios.$get("/f/getCourseQrCode?id=" + id)
				.then(function (response) {
					let msg = response.msg
					if(msg){
						if(msg == '请验证手机号码'){
							that.dialogVisible = true
						}else if(msg == '请登录'){
							that.$router.push("/login");
						}
					}else{
						console.log("跳转到课程或者考试")
						//跳转到课程或者考试
						let courseType = response.data.qrCourseType
						if(courseType == '2'){
							// uni.navigateTo({
							// 	url:'/pages/course/test?id=' + response.data.paperId
							// })
              //跳转到测试
              // that.$router.push("/ceshi?id=" + response.data.paperId);
              that.$router.push('/ceshi/' + response.data.paperId);
						}else if(courseType == '15'){
							console.log("跳转到ppt课程")
						}else{
              //跳转到课程
							// uni.navigateTo({
							// 	url:'/pages/course/content?id=' + response.data.courseId
							// })
              that.$router.push("/dbcourse_content/" + response.data.courseId);
						}
					}

				})
				.catch(function (error) {
				  console.log(error);
				})
			}
		}
	}
</script>

<style lang="less" scoped>
  // /deep/.el-input{
  //   width: 450px;
  // }
	.main{
		.yanzheng {
			// opacity: 0.8;
			// background-color: red;
			// position: absolute;
			// bottom: 0;
			// left: 3%;
			width: 100%;
			// height: 500rpx;
			background-color: #ffffff;

			.title {
				padding-top: 20px;
				text-align: center;
				width: 100%;
				height: 40px;
				// background-color: #399ee4;
				font-size: 20px;
				line-height: 40px;
				color: #000113;
			}

			.yanzheng-body {
				width: 100%;
        height: 300px;
				// background-color: #effaff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.nameAndPhone {
					width: 450px;
					display: flex;
					margin-bottom: 20px;
					justify-content: center;
					align-items: center;

					.message{
						width: calc(100% - 100px) !important;
					}
					.code{
						width: 100px;
						text-align: center;
						background-color: #0076ca;
						color: white;
						height: 40px;
						line-height: 40px;
						border-radius: 8px;
						cursor: pointer;
					}
					span {
						margin-right: 20px;
						color: #9D9B9B;
						font-size: 16px;
						font-weight: bold;
					}

					input {
						display: inline-block;
						border-bottom: 1px solid #c5c3c3;
						width: 80%;
						height: 40px;
						// background-color: white;
						padding: 0 5px;
					}

					image {
						margin-right: 5px;
					}

					.nameImg {
						width: 20px;
						height: 20px;
					}

					.phoneImg {
						width: 16px;
						height: 16px;
					}
				}
				.weixinlogin{
					margin-bottom: 20px;
					color: #0076CA;
					cursor: pointer;
				}

				.button {
					width: 450px;
					color: white;
					font-weight: bold;
					font-size: 16px;
					background-color: #0076ca;
					// .icon{
					// 	position: relative;
					// 	top: -12rpx;
					// }
				}
			}
		}
	}
</style>
